<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no ">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/news.css?v=1.0.1">
    <style>
        video {
            position: fixed;
            top: 0;
            left: 0;
            object-fit: fill;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- <video autoplay="auto" controls id="video-url" loop="true" preload="auto" x5-video-player-type="h5-page">
        <source autoplay id="video-url-mp4"
            src="https://vdept.bdstatic.com/6131316b6338454175476d7365754354/4747476465327438/3ec908999fcb669c16ea97f312b85c33ae527fae396320b97afa82512f391f3e3f9185513fa977b3380246380477780a.mp4?auth_key=1586850366-0-0-b25b335516410ffe40d6c4c2196e4971"
            onload="loadVideo('https://vdept.bdstatic.com/6131316b6338454175476d7365754354/4747476465327438/3ec908999fcb669c16ea97f312b85c33ae527fae396320b97afa82512f391f3e3f9185513fa977b3380246380477780a.mp4?auth_key=1586850366-0-0-b25b335516410ffe40d6c4c2196e4971')"
            type="video/mp4">
    </video> -->
    <!-- <img src="https://vdept.bdstatic.com/6131316b6338454175476d7365754354/4747476465327438/3ec908999fcb669c16ea97f312b85c33ae527fae396320b97afa82512f391f3e3f9185513fa977b3380246380477780a.mp4?auth_key=1586850366-0-0-b25b335516410ffe40d6c4c2196e4971" alt=""> -->
    <button onclick="selectVideo()">选择视频</button>
    <input type="file" id="video" accept="video/*" style="display: none;">
    <div id="in-box" style="display: none;"></div>
    <img src="" id="js-img" alt="">
    <img src="" id="js-img2" alt="">
</body>
<script src="../../script/jquery_min.js"></script>
<script>
    function selectVideo() {
        $('#video').click();
    }
    $('#video').on('change', function () {
        var file = this.files[0];
        var blob = new Blob([file]); // 文件转化成二进制文件
        var url = URL.createObjectURL(blob); //转化成url
        var html = '<div><video controls src="' + url + '"></video></div><div> </div>';
        $("#in-box").html(html);
        var videoElement = $("video")[0];
        videoElement.addEventListener("canplay", function (_event) {
            var canvas = document.createElement("canvas");
            canvas.width = videoElement.videoWidth;
            canvas.height = videoElement.videoHeight;
            canvas.getContext("2d").drawImage(videoElement, 0, 0, canvas.width, canvas.height);
            // _log(canvas.toDataURL("image/png")); //第一帧图片url
            var _imgsrc = canvas.toDataURL("image/png");
            // _imgsrc = _imgsrc.replace('data:image/png;base64,', '');
            $('#js-img').attr('src', _imgsrc);
            var imgblob = new Blob([_imgsrc]);
            var imgurl = URL.createObjectURL(imgblob); //转化成url
            _log(imgurl);
            $('#js-img2').attr('src', imgurl);
        })
    })
</script>

</html>